import { Drawer } from 'antd'
import { Input, message, Modal } from 'antd'
import React, { useCallback, useState } from 'react'
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import ReactFlow, { ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow, MiniMap, Controls, Background } from 'reactflow'
import 'reactflow/dist/style.css'
import axios from 'axios'
import MyNode from '../../components/FLow/MyNode'
import MyCard from '../../components/MyCard'
import { Add } from '../../components/MyIcon'
import './index.css'

let nodeId = 10
let nodeStr = ''

const nodeTypes = {
  myNode: MyNode
}
const Flow = React.memo(() => {
  const [open, setOpen] = useState(false)
  const [nodes, setNodes] = useState([])
  useEffect(() => {
    const info = JSON.parse(localStorage.getItem("info"))

    axios({
      method: 'post',
      url: 'http://10.162.231.164:3000/api/learn/getNode',
      params: {
        user_mail: info.email
      }
    })
      .then(
        response => {
          setNodes(response.data)
        },
        error => { }
      )

      axios({
        method: 'post',
        url: 'http://10.162.231.164:3000/api/learn/getEdges',
        params: {
          user_mail: info.email
        }
      })
        .then(
          response => {
            setEdges(response.data)
          },
          error => { }
        )
  }, [])
  const showDrawer = () => {
    setOpen(true)
  }

  const onClose = () => {
    setOpen(false)
  }
  const onDelete = useCallback(node => {
    reactFlowInstance.deleteElements({ nodes: [node] })
  }, [])
  const [modal, contentHold] = Modal.useModal()
  const reactFlowInstance = useReactFlow()
  const [edges, setEdges] = useState([])

  const onNodesChange = useCallback(changes => setNodes(nds => applyNodeChanges(changes, nds)), [setNodes])
  const onEdgesChange = useCallback(changes => setEdges(eds => applyEdgeChanges(changes, eds)), [setEdges])
  const onConnect = useCallback(connection => setEdges(eds => addEdge(connection, eds)), [setEdges])
  const onOk = useCallback(() => {
    if (nodeStr === '') {
      message.error({ content: '节点内容不能为空', duration: 1 })
      return
    }
    const id = `${++nodeId}`
    const newNode = {
      id,
      type: 'myNode',
      position: {
        x: 0,
        y: -50
      },
      data: {
        label: nodeStr,
        onDelete
      }
    }
    reactFlowInstance.addNodes(newNode)
  }, [])
  return (
    <MyCard>
      <ReactFlow
        deleteKeyCode="Delete"
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        fitView
        style={{
          backgroundColor: '#fcfcfc'
        }}
      >
        <div className="StudyPath_addNode" onClick={showDrawer}>
          <Add />
        </div>
      </ReactFlow>
      {contentHold}
      <Drawer title="技术列表" placement="right" onClose={onClose} open={open}></Drawer>
    </MyCard>
  )
})

export default React.memo(() => {
  const [modal, contextHolder] = Modal.useModal()

  const navigate = useNavigate()
  useEffect(() => {
    if (!localStorage.getItem('info')) {
      modal.error({
        title: '权限错误!',
        content: '当前用户未登录，请先前往登录界面登录',
        onOk: () => {
          navigate('/center/login')
        }
      })
      return
    }

  }, [])
  return (
    <ReactFlowProvider>
      <Flow/>
      {contextHolder}
    </ReactFlowProvider>
  )
})
